<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style type="text/css">
        </style>
        <!--scrollable-wizard.css-->
        <style>
            
            /* scrollable root element */ #wizard {
                background: #fff url(./img/gradient/h600.png) repeat scroll 0 0;
                border: 5px solid #789;
                font-size: 12px;
                height: 450px;
                margin: 20px auto;
                width: 570px;
                overflow: hidden;
                position: relative;
                /* rounded corners for modern browsers */
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
            }
            
            /* scrollable items */ #wizard .items {
                width: 20000em;
                clear: both;
                position: absolute;
            }
            
            /* single item */ #wizard .page {
                padding: 20px 30px;
                width: 500px;
                float: left;
            }
            
            /* title */ #wizard h2 {
                border-bottom: 1px dotted #ccc;
                font-size: 22px;
                font-weight: normal;
                margin: 10px 0 0 0;
                padding-bottom: 15px;
            } #wizard h2 em {
                display: block;
                font-size: 14px;
                color: #666;
                font-style: normal;
                margin-top: 5px;
            }
            
            /* input fields */ #wizard ul {
                padding: 0px !important;
                margin: 0px !important;
            } #wizard li {
                list-style-type: none;
                list-style-image: none;
                margin-bottom: 25px;
            } #wizard label {
                font-size: 16px;
                display: block;
            } #wizard label strong {
                color: #789;
                position: relative;
                top: -1px;
            } #wizard label em {
                font-size: 11px;
                color: #666;
                font-style: normal;
            } #wizard .text {
                width: 100%;
                padding: 5px;
                border: 1px solid #ccc;
                color: #456;
                letter-spacing: 1px;
            } #wizard select {
                border: 1px solid #ccc;
                width: 94%;
                padding: 4px;
            } #wizard label span {
                color: #b8128f;
                font-weight: bold;
                position: relative;
                top: 4px;
                font-size: 20px;
            } #wizard .double label {
                width: 50%;
                float: left;
            } #wizard .double .text {
                width: 93%;
            } #wizard .clearfix {
                clear: left;
                padding-top: 10px;
            } #wizard .right {
                float: right;
            }
            
            /* validation error message bar */ #drawer {
                background: #fff url(./img/gradient/h80.png) repeat-x scroll 0 0;
                _background-color: #fff;
                overflow: visible;
                position: fixed;
                left: 0;
                top: 0;
                text-align: center;
                padding: 15px;
                font-size: 18px;
                border-bottom: 2px solid #789;
                width: 100%;
                display: none;
                z-index: 2;
            } #wizard .error {
                border: 1px solid red;
            } #wizard #status {
                margin: 0px !important;
                height: 35px;
                background: #123 url(./img/gradient/h30.png) repeat-x;
                padding-left: 25px !important;
                _background: #123;
            } #status li {
                list-style-type: none;
                list-style-image: none;
                float: left;
                color: #fff;
                padding: 10px 30px;
            } #status li.active {
                background-color: #b8128f;
                font-weight: normal;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <!-- twitter style notification bar for validation errors -->
        <div id="drawer">
            Please fill in the empty fields marked with 
            a 
            <samp style="color:red">
                red
            </samp>
            border.
        </div>
        <!-- the form -->
        <form action="#">
            <div id="wizard">
                <ul id="status">
                    <li class="active">
                        <strong>1.</strong>
                        Create Account
                    </li>
                    <li>
                        <strong>2.</strong>
                        Contact Information
                    </li>
                    <li>
                        <strong>3.</strong>
                        Finalize
                    </li>
                </ul>
                <div class="items">
                    <!-- page1 -->
                    <div class="page">
                        <h2><strong>Step 1: </strong>jQuery Tools Account<em>Please enter your login information:</em></h2>
                        <ul>
                            <!-- email -->
                            <li class="required">
                                <label>
                                    <strong>1.</strong>
                                    Enter Your Email Address <span>*</span>
                                    <br/>
                                    <input type="text" class="text" name="email" /><em>Your password will be sent to this address. Your
                                        address will not made public.</em>
                                </label>
                            </li>
                            <!-- username -->
                            <li>
                                <label>
                                    <strong>2.</strong>
                                    Pick a username 
                                    <br/>
                                    <input type="text" class="text" name="username" /><em>Your preferred username to be used when logging in.</em>
                                </label>
                            </li>
                            <!-- password -->
                            <li class="required double">
                                <label>
                                    <strong>3.</strong>
                                    Choose a Password <span>*</span>
                                    <br/>
                                    <input type="password" class="text" name="password" /><em>Must be at least 8 characters long.</em>
                                </label>
                                <label>
                                    Verify Password <span>*</span>
                                    <br/>
                                    <input type="password" class="text" name="password1" />
                                </label>
                            </li>
                            <li class="clearfix">
                                <button type="button" class="next right">
                                    Proceed &raquo;
                                </button>
                            </li>
                        </ul>
                    </div>
                    <!-- page2 -->
                    <div class="page">
                        <h2><strong>Step 2: </strong>Contact Information <b></b><em>Please tell us where you live:</em></h2>
                        <ul>
                            <!-- address -->
                            <li class="required">
                                <label>
                                    <strong>1.</strong>
                                    Enter Your Street Address <span>*</span>
                                    <br/>
                                    <input type="text" class="text" name="email" /><em><strong>Example</strong>: Random Street 69 A 666</em>
                                </label>
                            </li>
                            <!-- zip / city -->
                            <li class="required double">
                                <label>
                                    <strong>2.</strong>
                                    Enter Your Zip Code <span>*</span>
                                    <br/>
                                    <input class="text" name="zip" /><em>This must be a numeric value</em>
                                </label>
                                <label>
                                    <strong>3.</strong>
                                    and The City <span>*</span>
                                    <select name="city">
                                        <option value="">-- please select --</option>
                                        <option>Helsinki</option>
                                        <option>Berlin</option>
                                        <option>New York</option>
                                    </select>
                                </label>
                            </li>
                            <li class="clearfix">
                                <button type="button" class="prev" style="float:left">
                                    &laquo; Back
                                </button>
                                <button type="button" class="next right">
                                    Proceed &raquo;
                                </button>
                            </li>
                            <br clear="all" />
                        </ul>
                    </div>
                    <!-- page3 -->
                    <div class="page">
                        <h2><strong>Step 3: </strong>Congratulations! <b></b><em>You are now a happy member of the Open Source community</em></h2>
                        <img src="./img/title/eye.png" style="margin:30px 0 0 140px"/>
                        <p style="margin-top:30px">
                            <button type="button" class="prev">
                                &laquo; Back
                            </button>
                        </p>
                    </div>
                </div>
                <!--items-->
            </div>
            <!--wizard-->
        </form>
        <script type="text/javascript">
            $(function(){
                var root = $("#wizard").scrollable();
                
                // some variables that we need
                var api = root.scrollable(), drawer = $("#drawer");
                
                // validation logic is done inside the onBeforeSeek callback
                api.onBeforeSeek(function(event, i){
                
                    // we are going 1 step backwards so no need for validation
                    if (api.getIndex() < i) {
                    
                        // 1. get current page
                        var page = root.find(".page").eq(api.getIndex()), // 2. .. and all required fields inside the page
             inputs = page.find(".required :input").removeClass("error"), // 3. .. which are empty
             empty = inputs.filter(function(){
                            return $(this).val().replace(/\s*/g, '') == '';
                        });
                        
                        // if there are empty fields, then
                        if (empty.length) {
                        
                            // slide down the drawer
                            drawer.slideDown(function(){
                            
                                // colored flash effect
                                drawer.css("backgroundColor", "#229");
                                setTimeout(function(){
                                    drawer.css("backgroundColor", "#fff");
                                }, 1000);
                            });
                            
                            // add a CSS class name "error" for empty & required fields
                            empty.addClass("error");
                            
                            // cancel seeking of the scrollable by returning false
                            return false;
                            
                            // everything is good
                        }
                        else {
                        
                            // hide the drawer
                            drawer.slideUp();
                        }
                        
                    }
                    
                    // update status bar
                    $("#status li").removeClass("active").eq(i).addClass("active");
                    
                });
                
                // if tab is pressed on the next button seek to next page
                root.find("button.next").keydown(function(e){
                    if (e.keyCode == 9) {
                    
                        // seeks to next tab by executing our validation routine
                        api.next();
                        e.preventDefault();
                    }
                });
            });
        </script>
    </body>
</html>
